<template>
  <el-container>
    <div v-if="$route.meta.desktop" class="menu">
      <ball-menu :menu="menu" />
    </div>
    <el-aside v-else width="300">
      <sys-menu />
    </el-aside>
    <el-container>
      <el-main
        :style="
          bodyHeight > 600
            ? { minHeight: bodyHeight - 60 - 48 + 'px',height:bodyHeight -60 -48 + 'px' }
            : { minHeight: '600px',height:'600px' }
        "
      >
        <sys-main :desktop="$route.meta.desktop" />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Menu from "./Menu";
import Main from "./Main";
import BallMenu from '@comp/base/BallMenu'
export default {
  components: { SysMenu: Menu, SysMain: Main, BallMenu},
  data() {
    return {
      menu:[],
      bodyHeight: document.documentElement.clientHeight,
    };
  },
  mounted() {
    const that = this;
    //根据窗口大小调整
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        that.bodyHeight = window.fullHeight;
      })();
    };
    if (typeof this.$store.state.activeSys.children != 'undefined'){
      this.menu = this.$store.state.activeSys.children
    }
  },
  watch:{
    '$store.state.activeSys'(val){
      if (typeof val.children != 'undefined'){
        this.menu = val.children
      }
    }
  }
};
</script>

<style lang="less" scoped>
.menu {
  position:absolute;
  top:80px;
  left:20px;
}
</style>
